<template>
  <a-config-provider :locale="locale">
    <div id="app">
      <router-view />
    </div>
  </a-config-provider>
</template>
<script>
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
import enquireScreen from '@/utils/device'
import { timeStringYMDHMS } from '@/utils/date-time.js'
// eslint-disable-next-line no-unused-vars
import { mapState, mapActions, mapGetters } from 'vuex'

export default {
  data() {
    return {
      locale: zhCN
    }
  },

  computed: {
    ...mapState('backendVisit', {
      visitInfo: state => state.visitInfo
    }),

    visitId: {
      cache: false,
      get() {
        const getVisitId = this.$store.getters['backendVisit/getVisitId']
        return getVisitId()
      }
    },

    leaveTime: {
      cache: false,
      get() {
        const getLeaveTime = this.$store.getters['backendVisit/getLeaveTime']
        return getLeaveTime()
      }
    }
  },

  created() {
    console.log('\n\n' + 'created' + '\n\n')
    let that = this
    enquireScreen(deviceType => {
      // tablet
      if (deviceType === 0) {
        that.$store.commit('TOGGLE_DEVICE', 'mobile')
        that.$store.dispatch('setSidebar', false)
      }
      // mobile
      else if (deviceType === 1) {
        that.$store.commit('TOGGLE_DEVICE', 'mobile')
        that.$store.dispatch('setSidebar', false)
      } else {
        that.$store.commit('TOGGLE_DEVICE', 'desktop')
        that.$store.dispatch('setSidebar', true)
      }
    })

    window.onload = () => {
      const loadTime = new Date().getTime()
      const leaveTime = this.leaveTime
      const gap = loadTime - leaveTime
      console.log('\n\n load time:' + JSON.stringify(loadTime) + '\n\n')
      console.log('\n\n leave time:' + JSON.stringify(leaveTime) + '\n\n')
      console.log('\n\n gap:' + JSON.stringify(gap) + '\n\n')
      if (gap > 2000) {
        console.log('重新进入页面')
        if (!that.visitInfo) that.backendVisitBeginTrack()
      } else {
        console.log('刷新页面')
      }
    }
  },
  mounted() {
    const that = this
    document.addEventListener('visibilitychange', function logData() {
      if (document.visibilityState === 'hidden') {
        const apiBaseUrl =
          process.env.NODE_ENV === 'development'
            ? process.env.VUE_APP_API_ORIGIN + '/api'
            : process.env.VUE_APP_API_BASE_URL
        const url = apiBaseUrl + '/analytics/hTBackendVisitAction/visitEdit'
        const date = new Date()
        const leaveTime = timeStringYMDHMS(date)
        const id = that.visitId
        const parameters = {
          id,
          leaveTime: leaveTime
        }
        that.$store.commit('backendVisit/SET_LEAVE_TIME', date.getTime())

        navigator.sendBeacon(url, JSON.stringify(parameters))
      }
    })
  },
  methods: {
    backendVisitBeginTrack() {
      const that = this
      const visitTime = timeStringYMDHMS(new Date())
      const parameters = {
        visitTime: visitTime
      }

      that.$store
        .dispatch('backendVisit/visitBackendAction', parameters)
        .then(() => {})
        .catch(() => {})
    }
  }
}
</script>
<style>
#app {
  height: 100%;
}
</style>

